<template>
    <div v-if="showHome" class="absolute w-full h-full select-none box" @click="loadFull">
        <div class="absolute bottom-0 item drop-shadow-xl">
            <p v-show="showText" class="text-center text-white text-2xl animate-pulse mb-5 font-serif">点击进入游戏</p>
            <img src="../assets/imgs/Spongebob.png" class="w-10 absolute bottom-8 right-3 z-10 animate-bounce">
            <p class="text-white text-center px-12 ">Life is like a mirror; it smiles
                back at you if you smile at it, and it cries with you if you cry. The
                world treats you as you treat it. Success is not the endpoint, nor are setbacks fatal; the courage to
                keep moving forward is what truly matters. The meaning of life lies in constant exploration and growth,
                not in reaching a predetermined destination. Each step can be a new beginning, and every beginning
                carries with it new possibilities. Cherish the present, value the people around you, for life waits for
                no one and missed moments can never be reclaimed.</p>
            <el-progress style="width: 90%;margin:10px auto;" :percentage="percentage" :show-text="false" striped />
        </div>
    </div>
    <Control v-else></Control>
    <canvas ref="webgl"></canvas>
</template>
<script setup>
import { onMounted, onUnmounted, ref, watch } from 'vue'
import Control from './Control.vue';
import { ThreeApp } from '../helpers'
let webgl = ref(null)
let threeApp
const showText = ref(false)
const showHome = ref(true)
const percentage = ref(0)
let timer
onMounted(() => {
    threeApp = new ThreeApp(webgl.value)
    threeApp.render()
    timer = setInterval(() => {
        percentage.value += Math.floor(Math.random() * 30)
    }, 1000)
})
watch(() => percentage.value, () => {
    if (percentage.value >= 100) {
        percentage.value = 100
        setTimeout(() => {
            showText.value = true
        }, 1000);
        clearInterval(timer)
    }
})
const loadFull = () => {
    if (!showText.value) return
    showHome.value = false
}
onUnmounted(() => {
    threeApp.clear()
})
</script>
<style scoped>
.box {
    background: url("../assets/imgs/home.jpeg") no-repeat;
    background-size: cover;
}

.item {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 1) 100%);
    font-family: Arial, Helvetica, sans-serif;
}
</style>